<template>
  <a-modal
    class="video-player-modal-container"
    v-model="visible"
    centered
    width="800px"
    :footer="null"
    :closable="false"
    :bodyStyle="bodyStyle"
    @cancel="handlerCancel"
    destroyOnClose
    v-loading="loading">
    <video ref="videoInstance" width="800" height="100%" controls :loop="false">
        <source :src="videoUrl" type="video/mp4" />
        <source :src="videoUrl" type="video/mkv" />
    </video>
  </a-modal>
</template>
<script>
// import VuePlyr from 'vue-plyr';
import { options, bodyStyle } from './configs/config';
export default {
  props: {
    loading: Boolean, // 加载
    videoUrl: String, //需要传入视频的url路径
  },
  components: {
    // VuePlyr,
  },
  data() {
    return {
      visible: false,
      options,
      bodyStyle,
    };
  },
  mounted() {
  },
  methods: {
    showModal() {
      this.visible = true;
      this.$nextTick(() => {
        // console.log(this.$refs.plyr.player.stop)
        // this.$refs.videoInstance.on('ready', (event) => {
        //   const instance = event.detail.plyr
        //   console.log(instance.stop())
        // })
        this.$refs.videoInstance.pause()
      });
    },
    handlerCancel() {
      this.$refs.videoInstance.pause()
      this.$refs.videoInstance.currentTime=0
      this.$emit('cancelPlay');
    },
  },
};
</script>
